<template>
    <div>
        <div class="selectWrapper">
            <select name="select" id="echarts_two" class="select">
            </select>
        </div>
        <div ref="chart" style="width: 100%;height: 65vh">
        </div>
    </div>
</template>

<script >
  import * as echarts from 'echarts/core';
  import {
    BarChart
  } from 'echarts/charts';
  import {
    TitleComponent,
    TooltipComponent,
  } from 'echarts/components';
  import {
    CanvasRenderer
  } from 'echarts/renderers';

  import { LegendComponent } from 'echarts/components';
  import { PieChart } from 'echarts/charts';

  echarts.use(
    [BarChart,TitleComponent, TooltipComponent,  CanvasRenderer,
        LegendComponent,PieChart]
  );

  export default {
      data() {
          return {
              myChart: () => {
                  return echarts.init(this.$refs.chart)
              }
          }
      },
      props: ['optionValue'],
      mounted() {
          this.init(this.optionValue);
          this.addOption();
      },
      methods: {
          addOption(){
              const valueObj=[
                  {name:'支出', value: '支出'},
                  {name:'收入', value: '收入'},
              ]
              //根据id查找对象，
              const obj = document.getElementById('echarts_two');
              valueObj.forEach((item)=>{
                  obj.add(new Option(item.name, item.value));
              })
          },
          init(a) {
              this.myChart().setOption(
                {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '5%',
                        left: 'center'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '40',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                {value: 1048, name: 'Search Engine'},
                                {value: 735, name: 'Direct'},
                                {value: 580, name: 'Email'},
                                {value: 484, name: 'Union Ads'},
                                {value: 300, name: 'Video Ads'}
                            ]
                        }
                    ]
                }
              );
          }
      },


  }
</script>

<style lang="scss" scoped>
    .textTip{
        position: absolute;
        top: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #888888;
        margin-top: 30vh;
        .icon{
            fill:currentColor;
        }
    }
    .select{
        border-color: black;
        margin: 1em 1em 0 1em;
        height: 2em;
    }
</style>

